<template>
  <div>
    <header-vue v-for="item in headerList" 
        :key="item.uuid" 
        :output="output" 
        :header="item"
        @change="headerChange"
        @deleteHeader="deleteHeader"
    >
    </header-vue>
    <a-button class="add_bt" @click="addHeader"> +{{title}} </a-button>
  </div>
</template>

<script>
import HeaderVue from './header.vue'
import { uuid } from '@/utils/utils';
export default {
    components:{
        HeaderVue
    },
    props:{
		headers: {
			default: []
		},
        title: {
            default: ''
        },
		output: {
			default: []
		},
    },
    methods:{
        addHeader(){
            this.headerList.push({
                uuid: uuid(),
                key:"",
                value: "",
                storeValue: ""
              })
        },
        deleteHeader(item){
            this.headerList = this.headerList.filter(h => h.uuid !== item.uuid)
            this.$emit('change', this.headerList)
        },
        headerChange(item, value, storeValue){
            let header = this.headerList.find(h => h.uuid === item.uuid)
            if(header){
                header.value = value
                header.storeValue = storeValue
            }
            this.$emit('change', this.headerList)
        },
    },
    data(){
        return {
            headerList: []
        }
    },
    mounted(){
        this.headerList = this.headers.map(h => {
            return {...h, uuid: uuid()}
        })
    }
}
</script>

<style lang="less">

</style>